<template>
  <div id="servive">
    <div class="header">
      <!-- 专家页面 -->
      <van-nav-bar title="专家服务" :border="false" @click-left="Goback">
        <template #right>
          <van-image :src="imageurls" />
        </template>
        <template #left>
          <van-image :src="imageurl" />
        </template>
      </van-nav-bar>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        shape="round"
        placeholder="搜索医生、服务名称、科室"
        @focus="onfouse"
      />
    </div>
    <!-- 标签页 -->
    <van-tabs
      v-model="active"
      title-active-color="#1485F9"
      title-inactive-color="#333333"
      line-width="20px"
      color="#1485F9"
    >
      <van-tab :title="item" v-for="item in titlelist" :key="item">
        <div class="content">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多内容了"
            @load="onLoad"
            offset="10"
          >
            <ul>
              <li
                class="details"
                v-for="value in ExpertList.arr"
                :key="value._id"
              >
                <div class="details-top">
                  <div class="details-top-left">
                    <p class="details-titile">
                      <span>{{ value.servicetype }}</span>
                      <span>({{ value.inquiry }})</span>
                    </p>
                    <p class="details-equity">
                      <span v-for="item in value.equitytype" :key="item">{{
                        item
                      }}</span>
                      <span>等{{ value.equitynum }}项权益</span>
                    </p>
                  </div>
                  <div class="details-top-right">
                    <p class="details-money">￥{{ value.currentmoney }}</p>
                    <p class="details-mo">￥{{ value.oldmoney }}</p>
                  </div>
                </div>
                <div class="details-foolter">
                  <van-image round :src="prefix + value.imgUrl" />
                  <div class="foolter-top-left">
                    <p class="foolter-titile">
                      <span>{{ value.doctor }}</span>
                      <span class="doctortype">{{ value.doctortype }}</span>
                    </p>
                    <p class="foolter-equity">
                      <span>{{ value.hospital }}</span>
                      <span style="margin-left: 10px">{{
                        value.department
                      }}</span>
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getExpertApi } from "../utils/api";
export default {
  setup() {
    const value = ref("");
    const imageurl = ref(
      require("@/assets/images/home1_service_slices/＜@2x.png")
    );
    const imageurls = ref(
      require("@/assets/images/home1_service_slices/youshang.png")
    );
    const active = ref(2);
    const titlelist = reactive(["全部", "脑卒中", "糖尿病"]);
    //搜索框点击事件
    onMounted(() => {
      window.addEventListener("focus", onfouse);
    });
    const router = useRouter();
    const onfouse = () => {
      router.push({
        path: "/expertsearch",
      });
    };
    // 回到上一级
    const Goback = () => {
      router.go(-1);
    };
    //获取专家服务的数据
    // 定义当前页数
    let currpage = ref(1);
    let prefix = ref("");
    let ExpertList = reactive({ arr: [] });
    const state = reactive({
      finished: false,
      loading: false,
    });
    // 定义图片拼接前缀

    const onLoad = () => {
      setTimeout(async () => {
        const res = await getExpertApi({
          curr: currpage.value,
          pagesize: 5,
          token: sessionStorage.getItem("token"),
        });
        prefix.value = res.prefix;
        ExpertList.arr = ExpertList.arr.concat(res.result);
        // 加载状态结束
        state.loading = false;
        currpage.value++;
        // 数据全部加载完成
        if (res.result.length === 0) {
          state.finished = true;
        }
      }, 1000);
    };
    return {
      imageurl,
      imageurls,
      value,
      state,
      active,
      titlelist,
      ExpertList,
      prefix,
      currpage,
      onLoad,
      onfouse,
      Goback,
    };
  },
};
</script>

<style lang="less">
#servive {
  .van-nav-bar__left {
    .van-image {
      width: 10px;
      height: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .van-nav-bar__right {
    .van-image {
      width: 18px;
      height: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .van-nav-bar__title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .van-tab__text {
    width: 50px;
    height: 30px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    text-align: center;
    line-height: 30px;
  }
  .van-tabs__wrap {
    .van-tabs__line {
      width: 20px !important;
    }
  }
  .content {
    background: #f5f5f5;
    width: 100%;
    padding: 12px;
    .details {
      margin-top: 10px;
      width: 100%;
      height: 145px;
      background: #ffffff;
      border-radius: 10px;
      padding: 14px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .details-top {
        display: flex;
        justify-content: space-between;
        .details-top-left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 235px;
          height: 50px;
          .details-titile {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 20px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .details-equity {
            width: 100%;
            height: 20px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #999999;
          }
        }
        .details-top-right {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .details-money {
            height: 16px;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #f70c0a;
            text-align: right;
          }
          .details-mo {
            height: 15px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            text-decoration: line-through;
            color: #999999;
            text-align: right;
          }
        }
      }
    }
    .details-foolter {
      width: 100%;
      background: #f7f8fa;
      border-radius: 10px;
      padding: 8px 13px;
      display: flex;
      .van-image {
        width: 35px;
        height: 38px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .foolter-top-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 235px;
        margin-left: 10px;
        .foolter-titile {
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          .doctortype {
            margin-left: 10px;
            font-size: 13px;
          }
        }
        .foolter-equity {
          width: 225px;
          height: 20px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #999999;
        }
      }
    }
  }
}
</style>
